<!--
@license
Copyright 2018 The Tensor2Tensor Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../app-route/app-location.html">
<link rel="import" href="../app-route/app-route.html">
<link rel="import" href="../app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../app-layout/app-header/app-header.html">
<link rel="import" href="../app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../iron-selector/iron-selector.html">

<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-item/paper-item.html">

<link rel="import" href="../explore_view/explore-view.html">

<dom-module id="insights-app">
  <template>
    <style>
      :host {
        display: block;
        --app-primary-color: #4285f4;
        --app-secondary-color: black;
      }

      #drawer app-toolbar {
        border-bottom: 1px solid #f2f2f2;
      }

      #drawer app-toolbar iron-icon {
        padding: 0px 12px;
      }

      app-header {
        background-color: var(--app-primary-color);
        color: #fff;
      }

      app-header paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      .drawer-list {
      }
      .drawer-list a {
        display: block;
        padding: 0 16px;
        line-height: 40px;
        text-decoration: none;
        color: var(--app-secondary-color);
      }
      a.iron-selected paper-item {
        color: black;
        font-weight: bold;
      }

      iron-pages {
        height: 100%;
        width: 100%;
      }

      div.break {
        border: 1px #f2f2f2 solid;
      }
    </style>

    <!--
      Get the location path and parse out the first entry if one exists.  This
      will determine the view to display.
    -->
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <app-drawer-layout fullbleed>

      <!--
        Present drawer content with menu items.  This will automatically
        collapse for smaller screens.
      -->
      <app-drawer id="drawer" slot="drawer">
        <app-toolbar>
          <div>Debug Frontend</div>
        </app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="explore" href="/explore">
            <paper-item>Explore</paper-item>
          </a>

          <div class="break"></div>
        </iron-selector>
      </app-drawer>

      <!--
        Present the main content.  Each page will correspond to a menu item.
      -->
      <app-header-layout has-scrolling-region>

        <app-header slot="header" condenses reveals effects="waterfall">
          <app-toolbar>
            <div main-title>
              <iron-pages role="main" selected="[[page]]" selected-item="{{currentPage}}" attr-for-selected="name">
                <div name ="explore">Explore Translations</div>
              </iron-pages>
            </div>
          </app-toolbar>
        </app-header>

        <iron-pages role="main" selected="[[page]]" selected-item="{{currentPage}}" attr-for-selected="name">
          <explore-view name="explore" route="{{subroute}}"></explore-view>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>
  <script src="insights-app.js"></script>
</dom-module>
